<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<jsp:include page="common/common.jsp"></jsp:include>

<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<jsp:include page="common/header.jsp"></jsp:include>
		<jsp:include page="common/aside.jsp"></jsp:include>
		<!-- 内容区域 -->
		<div class="content-wrapper" id="content">
			<!-- Content Header (页眉) -->
			<section class="content-header">
				<h1>仪表盘
					<small>控制面板</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-dashboard"></i>首页</a></li>
					<li class="active">仪表盘</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<!-- Small boxes (Stat box) -->
				<div class="row">
					<div class="col-lg-3 col-xs-6">
						<!-- small box -->
						<div class="small-box bg-aqua">
							<div class="inner">
								<h3>150</h3>
								<p>新订单</p>
							</div>
							<div class="icon">
								<i class="ion ion-bag"></i>
							</div>
							<a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-3 col-xs-6">
						<!-- small box -->
						<div class="small-box bg-green">
							<div class="inner">
								<h3>53<sup style="font-size: 20px">%</sup></h3>
								<p>跳出率</p>
							</div>
							<div class="icon">
								<i class="ion ion-stats-bars"></i>
							</div>
							<a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-3 col-xs-6">
						<!-- small box -->
						<div class="small-box bg-yellow">
							<div class="inner">
								<h3>44</h3>

								<p>用户注册</p>
							</div>
							<div class="icon">
								<i class="ion ion-person-add"></i>
							</div>
							<a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-3 col-xs-6">
						<!-- small box -->
						<div class="small-box bg-red">
							<div class="inner">
								<h3>65</h3>

								<p>独立访客</p>
							</div>
							<div class="icon">
								<i class="ion ion-pie-graph"></i>
							</div>
							<a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
				</div>
				<!-- /.row -->
				<!-- Main row -->
				<div class="row">
					<!-- Left col -->
					<section class="col-lg-7 connectedSortable">
						<!-- Custom tabs (Charts with tabs)-->
						<div class="nav-tabs-custom">
							<!-- Tabs within a box -->
							<ul class="nav nav-tabs pull-right">
								<li class="active"><a href="#revenue-chart" data-toggle="tab">地区</a></li>
								<li><a href="#sales-chart" data-toggle="tab">圆环图</a></li>
								<li class="pull-left header"><i class="fa fa-inbox"></i> 销售额</li>
							</ul>
							<div class="tab-content no-padding">
								<!-- Morris chart - Sales -->
								<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
								<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
							</div>
						</div>
						<!-- /.nav-tabs-custom -->

						<!-- Chat box -->
						<div class="box box-success">
							<div class="box-header">
								<i class="fa fa-comments-o"></i>

								<h3 class="box-title">聊天</h3>

								<div class="box-tools pull-right" data-toggle="tooltip" title="Status">
									<div class="btn-group" data-toggle="btn-toggle">
										<button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
										</button>
										<button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
									</div>
								</div>
							</div>
							<div class="box-body chat" id="chat-box">
								<!-- chat item -->
								<div class="item">
									<img src="${ctx}/img/user4-128x128.jpg" alt="用户图像" class="online">

									<p class="message">
										<a href="#" class="name">
											<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
											小雨
										</a>
										我想和你谈谈新主题最新消息。
									</p>
									<div class="attachment">
										<h4>附件：</h4>

										<p class="filename">
											Theme-thumbnail-image.jpg
										</p>

										<div class="pull-right">
											<button type="button" class="btn btn-primary btn-sm btn-flat">打开</button>
										</div>
									</div>
									<!-- /.attachment -->
								</div>
								<!-- /.item -->
								<!-- chat item -->
								<div class="item">
									<img src="${ctx}/img/user3-128x128.jpg" alt="用户图像" class="offline">
									<p class="message">
										<a href="#" class="name">
											<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
											小度
										</a>
										我想和你谈谈新主题最新消息。
									</p>
								</div>
								<!-- /.item -->
								<!-- chat item -->
								<div class="item">
									<img src="${ctx}/img/user2-160x160.jpg" alt="用户图像" class="offline">

									<p class="message">
										<a href="#" class="name">
											<small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
											小雪
										</a>
										我想和你谈谈新主题最新消息。
									</p>
								</div>
								<!-- /.item -->
							</div>
							<!-- /.chat -->
							<div class="box-footer">
								<div class="input-group">
									<input class="form-control" placeholder="输入消息...">
									<div class="input-group-btn">
										<button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
									</div>
								</div>
							</div>
						</div>
						<!-- /.box (chat box) -->
						<!-- TO DO List -->
						<div class="box box-primary">
							<div class="box-header">
								<i class="ion ion-clipboard"></i>
								<h3 class="box-title">待办事项</h3>
								<div class="box-tools pull-right">
									<ul class="pagination pagination-sm inline">
										<li><a href="#">&laquo;</a></li>
										<li><a href="#">1</a></li>
										<li><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">&raquo;</a></li>
									</ul>
								</div>
							</div>
							<!-- /.box-header -->
							<div class="box-body">
								<!-- See ${ctx}/js/pages/dashboard.js to activate the todoList plugin -->
								<ul class="todo-list">
									<li>
										<!-- drag handle -->
										<span class="handle">
											<i class="fa fa-ellipsis-v"></i>
											<i class="fa fa-ellipsis-v"></i>
										</span>
										<!-- checkbox -->
										<input type="checkbox" value="">
										<!-- todo text -->
										<span class="text">设计一个不错的主题</span>
										<!-- Emphasis label -->
										<small class="label label-danger"><i class="fa fa-clock-o"></i> 2 分钟前</small>
										<!-- General tools such as edit or delete-->
										<div class="tools">
											<i class="fa fa-edit"></i>
											<i class="fa fa-trash-o"></i>
										</div>
									</li>
									<li>
										<span class="handle">
											<i class="fa fa-ellipsis-v"></i>
											<i class="fa fa-ellipsis-v"></i>
										</span>
										<input type="checkbox" value="">
										<span class="text">使响应式主题</span>
										<small class="label label-info"><i class="fa fa-clock-o"></i> 4 小时前</small>
										<div class="tools">
											<i class="fa fa-edit"></i>
											<i class="fa fa-trash-o"></i>
										</div>
									</li>
									<li>
										<span class="handle">
											<i class="fa fa-ellipsis-v"></i>
											<i class="fa fa-ellipsis-v"></i>
										</span>
										<input type="checkbox" value="">
										<span class="text">让主题像星星般闪耀</span>
										<small class="label label-warning"><i class="fa fa-clock-o"></i> 1 天前</small>
										<div class="tools">
											<i class="fa fa-edit"></i>
											<i class="fa fa-trash-o"></i>
										</div>
									</li>
									<li>
										<span class="handle">
											<i class="fa fa-ellipsis-v"></i>
											<i class="fa fa-ellipsis-v"></i>
										</span>
										<input type="checkbox" value="">
										<span class="text">让主题像星星般闪耀</span>
										<small class="label label-success"><i class="fa fa-clock-o"></i> 3 天前</small>
										<div class="tools">
											<i class="fa fa-edit"></i>
											<i class="fa fa-trash-o"></i>
										</div>
									</li>
									<li>
										<span class="handle">
											<i class="fa fa-ellipsis-v"></i>
											<i class="fa fa-ellipsis-v"></i>
									 	</span>
										<input type="checkbox" value="">
										<span class="text">检查你的邮件和通知</span>
										<small class="label label-primary"><i class="fa fa-clock-o"></i> 1 周前</small>
										<div class="tools">
											<i class="fa fa-edit"></i>
											<i class="fa fa-trash-o"></i>
										</div>
									</li>
									<li>
										<span class="handle">
											<i class="fa fa-ellipsis-v"></i>
											<i class="fa fa-ellipsis-v"></i>
										</span>
										<input type="checkbox" value="">
										<span class="text">让主题像星星般闪耀</span>
										<small class="label label-default"><i class="fa fa-clock-o"></i> 1 月前</small>
										<div class="tools">
											<i class="fa fa-edit"></i>
											<i class="fa fa-trash-o"></i>
										</div>
									</li>
								</ul>
							</div>
							<!-- /.box-body -->
							<div class="box-footer clearfix no-border">
								<button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> 添加项目</button>
							</div>
						</div>
						<!-- /.box -->

						<!-- quick email widget -->
						<div class="box box-info">
							<div class="box-header">
								<i class="fa fa-envelope"></i>

								<h3 class="box-title">快速邮件</h3>
								<!-- tools box -->
								<div class="pull-right box-tools">
									<button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
											title="移除">
										<i class="fa fa-times"></i></button>
								</div>
								<!-- /. tools -->
							</div>
							<div class="box-body">
								<form action="#" method="post">
									<div class="form-group">
										<input type="email" class="form-control" name="emailto" placeholder="发邮件给：">
									</div>
									<div class="form-group">
										<input type="text" class="form-control" name="subject" placeholder="主题">
									</div>
									<div>
                						<textarea class="textarea" placeholder="消息"
												  style="width: 100%; height: 125px; font-size: 14px;
												  line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
										</textarea>
									</div>
								</form>
							</div>
							<div class="box-footer clearfix">
								<button type="button" class="pull-right btn btn-default" id="sendEmail">发送
									<i class="fa fa-arrow-circle-right"></i></button>
							</div>
						</div>

					</section>
					<!-- /.Left col -->
					<!-- right col (We are only adding the ID to make the widgets sortable)-->
					<section class="col-lg-5 connectedSortable">

						<!-- Map box -->
						<div class="box box-solid bg-light-blue-gradient">
							<div class="box-header">
								<!-- tools box -->
								<div class="pull-right box-tools">
									<button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
											title="日期范围">
										<i class="fa fa-calendar"></i></button>
									<button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
											data-toggle="tooltip" title="折叠" style="margin-right: 5px;">
										<i class="fa fa-minus"></i></button>
								</div>
								<!-- /. tools -->

								<i class="fa fa-map-marker"></i>

								<h3 class="box-title">
									访客
								</h3>
							</div>
							<div class="box-body">
								<div id="world-map" style="height: 250px; width: 100%;"></div>
							</div>
							<!-- /.box-body-->
							<div class="box-footer no-border">
								<div class="row">
									<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
										<div id="sparkline-1"></div>
										<div class="knob-label">访客</div>
									</div>
									<!-- ./col -->
									<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
										<div id="sparkline-2"></div>
										<div class="knob-label">在线</div>
									</div>
									<!-- ./col -->
									<div class="col-xs-4 text-center">
										<div id="sparkline-3"></div>
										<div class="knob-label">存在</div>
									</div>
									<!-- ./col -->
								</div>
								<!-- /.row -->
							</div>
						</div>
						<!-- /.box -->
						<!-- solid sales graph -->
						<div class="box box-solid bg-teal-gradient">
							<div class="box-header">
								<i class="fa fa-th"></i>

								<h3 class="box-title">销售图表</h3>

								<div class="box-tools pull-right">
									<button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
									</button>
									<button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i>
									</button>
								</div>
							</div>
							<div class="box-body border-radius-none">
								<div class="chart" id="line-chart" style="height: 250px;"></div>
							</div>
							<!-- /.box-body -->
							<div class="box-footer no-border">
								<div class="row">
									<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
										<input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
											   data-fgColor="#39CCCC">

										<div class="knob-label">邮件订单</div>
									</div>
									<!-- ./col -->
									<div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
										<input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
											   data-fgColor="#39CCCC">
										<div class="knob-label">在线</div>
									</div>
									<!-- ./col -->
									<div class="col-xs-4 text-center">
										<input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
											   data-fgColor="#39CCCC">

										<div class="knob-label">商店</div>
									</div>
									<!-- ./col -->
								</div>
								<!-- /.row -->
							</div>
							<!-- /.box-footer -->
						</div>
						<!-- /.box -->

						<!-- Calendar -->
						<div class="box box-solid bg-green-gradient">
							<div class="box-header">
								<i class="fa fa-calendar"></i>

								<h3 class="box-title">日历</h3>
								<!-- tools box -->
								<div class="pull-right box-tools">
									<!-- button with a dropdown -->
									<div class="btn-group">
										<button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-bars"></i></button>
										<ul class="dropdown-menu pull-right" role="menu">
											<li><a href="#">添加新事件</a></li>
											<li><a href="#">清除事件</a></li>
											<li class="divider"></li>
											<li><a href="#">查看日历</a></li>
										</ul>
									</div>
									<button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
									</button>
									<button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
									</button>
								</div>
								<!-- /. tools -->
							</div>
							<!-- /.box-header -->
							<div class="box-body no-padding">
								<!--The calendar -->
								<div id="calendar" style="width: 100%"></div>
							</div>
							<!-- /.box-body -->
							<div class="box-footer text-black">
								<div class="row">
									<div class="col-sm-6">
										<!-- Progress bars -->
										<div class="clearfix">
											<span class="pull-left">任务 #1</span>
											<small class="pull-right">90%</small>
										</div>
										<div class="progress xs">
											<div class="progress-bar progress-bar-green" style="width: 90%;"></div>
										</div>

										<div class="clearfix">
											<span class="pull-left">任务 #2</span>
											<small class="pull-right">70%</small>
										</div>
										<div class="progress xs">
											<div class="progress-bar progress-bar-green" style="width: 70%;"></div>
										</div>
									</div>
									<!-- /.col -->
									<div class="col-sm-6">
										<div class="clearfix">
											<span class="pull-left">任务 #3</span>
											<small class="pull-right">60%</small>
										</div>
										<div class="progress xs">
											<div class="progress-bar progress-bar-green" style="width: 60%;"></div>
										</div>

										<div class="clearfix">
											<span class="pull-left">任务 #4</span>
											<small class="pull-right">40%</small>
										</div>
										<div class="progress xs">
											<div class="progress-bar progress-bar-green" style="width: 40%;"></div>
										</div>
									</div>
									<!-- /.col -->
								</div>
								<!-- /.row -->
							</div>
						</div>
						<!-- /.box -->
					</section>
					<!-- right col -->
				</div>
				<!-- /.row (main row) -->
			</section>
			<!-- /.content -->
		</div>
		<!-- 内容区域 /-->
		<jsp:include page="common/footer.jsp"></jsp:include>

	</div>

	<script>
        function load(url) {
            $("#content").load(url);
        }
        $(function() {
            $('ul.treeview-menu>li>a').on('click',
				function() {
					var url = $(this).attr("data-url");
                    $("#content").load(url);
				}
			);
        });
		$(document).ready(function() {
			// 选择框
			$(".select2").select2();
			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale : 'zh-CN'
			});
		});
		// 设置激活菜单
		function setSidebarActive(tagUri) {
			var liObj = $("#" + tagUri);
			if (liObj.length > 0) {
				liObj.parent().parent().addClass("active");
				liObj.addClass("active");
			}
		}
		$(document).ready(function() {
			// 激活导航位置
			setSidebarActive("admin-index");
		});
	</script>
</body>
</html>